<%-- 
    Document   : home
    Created on : Apr 3, 2012, 1:53:22 AM
    Author     : Mr. Hung
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" media="all" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="javascript/general.js"></script>
        <script type="text/javascript" src="javascript/add_friend.js"></script>
        <title>Matching</title>
    </head>
    <body>
        <!--        Now for testing new body code-->
        <c:import url="/header.jsp"/>
        <c:import url="/leftbar.jsp"/>

        <div id="wrapper">
            <div id="content_wrapper"><span class="top"></span><span class="bottom"></span>
                <div id="content">

                    <c:if test="${fn:length(searchResult) == 0}">
                        <h3><b>Not found!</b></h3>
                    </c:if>

                    <c:if test="${fn:length(searchResult) > 0}">  
                        <div class="welcome_stt_box"> 
                            <h2>Search result: ${totalResults} </h2>
                        </div>
                        <table cellspacing="5">
                            <h5>Add people you may like</h5>
                            <c:forEach var="acc" items="${searchResult}">
                                <tr>
                                    <td width="100">
                                        <a href="<c:url value="/ViewPersonalInfo">
                                               <c:param name="accountId" value="${acc.accountId}"/>
                                           </c:url>"><img src="${acc.avatar}" height="80" width="80">
                                        </a>
                                    </td>
                                    <td width="200">
                                        <a href="<c:url value="/ViewPersonalInfo"><c:param name="accountId" value="${acc.accountId}"/></c:url>">
                                            <h5>${acc.username}</h5></a>
                                        Age&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp: ${acc.age}<br>
                                        Gender&nbsp: ${acc.gender}<br>
                                        Address: ${acc.location.address}
                                    </td>
                                    <td width="200">
                                        <h5>&nbsp</h5>
                                        Mutual friend(s): ${acc.numOfCommonFriends}<br>
                                        Matching percent: ${acc.matchPercent}%<br>
                                        <div>
                                            <div class="classification">
                                                <div class="cover"></div>
                                                <div class="progress" style="width: ${acc.matchPercent}%;"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td valign="bottom">
                                        <c:choose>
                                            <c:when test="${acc.relation == 'NOT_RELATIVE'}">
                                                 <form id="addForm">
                                                    <input class="btn" name="add" type="button" value="Add Friend" onclick="addFriend(this.form)">
                                                    <input type="hidden" name="targetId" value="${acc.accountId}">
                                                </form>
                                            </c:when>
                                            <c:when test="${acc.relation == 'IS_IN_WAITING'}">
                                                <input class="btn" type="button" value="Sent Request" disabled="true">
                                            </c:when>
                                            <c:when test="${acc.relation == 'IS_IN_REQUEST'}">
                                                <input class="btn" type="button" value="Waiting Your Response" disabled="true">
                                            </c:when>
                                            <c:otherwise>
                                                <input class="btn" type="button" value="Friend" disabled="true">
                                            </c:otherwise>
                                        </c:choose>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <div class="welcome_box">
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>
                    </c:if>
                    <c:if test="${fn:length(searchResult) < totalResults}">
                        <form action="Matching">
                            <input class="btn" type="submit" value="More results">
                            <input type="hidden" name="numOfResults" value="${fn:length(searchResult) + incrementOfResults}">
                        </form>
                    </c:if>
                </div> <!-- end of content -->

                <%-- side bar --%>
                <c:import url="/sidebar.jsp"/>

                <div class="cleaner"></div>
            </div>

            <div class="cleaner"></div>

        </div> <!-- end of content_wrapper -->

        <c:import url="/footer.jsp"/>

    </body>
</html>




